<script setup>
import {computed} from "vue";
import {filterIndexfieldsAPI} from "@/api/crm/common.js";
import crmTypeModel from "@/views/crm/model/crmTypeModel.js";
import MySceneList from "@/views/scrm/component/search/MySceneList.vue";
import ManageScene from "@/views/crm/componentsNew/SceneFormNew/ManageScene.vue";
import CreateScene from "@/views/crm/componentsNew/SceneFormNew/CreateScene.vue";

const properties = defineProps({
  sceneList: {
    type: Array
  },
})


const sceneName = computed(() => {
  return optionData.sceneData.name || '全部'
})

const optionData = reactive({
  crmType: "customer",

  showScene: false,
  // 展示场景创建对话框
  showSceneCreate: false,
  // 展示场景管理对话框
  showSceneManage: false,

  fieldList: [],
  // 场景数据
  sceneData: {id: '', bydata: '', name: ''},
  sceneFilterObj: {form: []}, // 筛选确定数据
})

const emits = defineEmits(['sceneChange'])

// 场景操作
/** 选择了场景 */
function onSceneChange(data) {
  optionData.sceneData.id = data.id
  optionData.sceneData.name = data.name
  optionData.sceneData.bydata = data.bydata
  emits('sceneChange', data)
}


function onAddScene(data) {
  filterIndexfieldsAPI({label: crmTypeModel[optionData.crmType]}).then(res => {
    console.log("res", res)
    optionData.fieldList = res.data.data
    console.log("res", optionData.fieldList)
    optionData.showSceneCreate = true
  }).catch((e) => {
    console.log("res e", e)
  })

}

function onManageScene(data) {
  optionData.showSceneManage = true
}

/**  创建保存成功 */
function updateSceneList() {
  emits('sceneChange', null)
  // let currentInstance = getCurrentInstance();

}
onActivated(() => {
  optionData.showSceneCreate = false;
})

</script>


<template>
  <slot name="custom"/>
  <span>场景搜索：</span>
  <el-popover  popper-class="no-padding-popover" width="180">
    <template v-slot:reference>
      <el-input v-model="sceneName" :readonly="true" class="scene-select">
        <template v-slot:suffix>
          <el-icon v-if="optionData.showScene">
            <ArrowUp/>
          </el-icon>
          <el-icon v-else>
            <ArrowDown/>
          </el-icon>
        </template>
      </el-input>
    </template>
    <MySceneList :sceneList="sceneList" ref="refSceneList" @sceneChange="onSceneChange"
                 @addScene="onAddScene" @manageScene="onManageScene"
                 @hideSceneList="optionData.showScene=false"/>
  </el-popover>

  <!--  <el-button v-if="showFilterView" type="primary" class="filter-button" @click="showFilterClick">-->
  <!--    高级筛选-->
  <!--  </el-button>-->

  <ManageScene v-model:visible="optionData.showSceneManage"
               :crm-type="optionData.crmType"
               @save-success="updateSceneList"/>

<!--  optionData.showSceneCreate：{{optionData.showSceneCreate}}-->
  <CreateScene :fieldList="optionData.fieldList"
               :crmType="optionData.crmType"
               v-model:dialogVisible="optionData.showSceneCreate"
               :obj="optionData.sceneFilterObj"
               @save-success="updateSceneList"/>
</template>

<style scoped lang="scss">
.scene-select {
  width: 180px;

  :deep(.el-input__inner) {
    cursor: pointer;
  }
}

.filter-button {
  margin-left: 20px;

  :deep(i) {
    font-size: 14px;
    margin-right: 5px;
  }
}
</style>